<template>
  <div class="content">
    <h1 class="title"><i class="fas fa-users"></i> 员工管理</h1>
    <div class="input-group">
      <input v-model="currentStaff.name" placeholder="姓名" class="input-field" :disabled="!isAuthenticated">
      <input v-model="currentStaff.position" placeholder="职位" class="input-field" :disabled="!isAuthenticated">
      <input v-model="currentStaff.phone" placeholder="电话" class="input-field" :disabled="!isAuthenticated">
      <input v-model="currentStaff.salary" placeholder="薪资" class="input-field" :disabled="!isAuthenticated">
      <button @click="isEditing ? updateStaff() : addStaff()" class="action-button" :disabled="!isAuthenticated">
        {{ isEditing ? '更新' : '添加' }}
      </button>
      <button v-if="isEditing" @click="cancelEdit" class="cancel-button" :disabled="!isAuthenticated">取消</button>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>职位</th>
          <th>电话</th>
          <th>薪资</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(staff, index) in staffList" :key="index">
          <td>{{ staff.name }}</td>
          <td>{{ staff.position }}</td>
          <td>{{ staff.phone }}</td>
          <td>{{ staff.salary }}</td>
          <td>
            <button @click="editStaff(index)" class="edit-button" :disabled="!isAuthenticated">编辑</button>
            <button @click="deleteStaff(index)" class="delete-button" :disabled="!isAuthenticated">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'StaffManagement',
  data() {
    return {
      staffList: [
        { name: '张三', position: '前台经理', phone: '13800138001', salary: '10000' },
        { name: '李四', position: '保洁', phone: '13800138002', salary: '6000' }
      ],
      currentStaff: {
        name: '',
        position: '',
        phone: '',
        salary: ''
      },
      isEditing: false,
      editingIndex: -1
    }
  },
  computed: {
    isAuthenticated() {
      return localStorage.getItem('isAuthenticated') === 'true';
    }
  },
  methods: {
    addStaff() {
      this.staffList.push({...this.currentStaff});
      this.resetForm();
    },
    editStaff(index) {
      this.currentStaff = {...this.staffList[index]};
      this.isEditing = true;
      this.editingIndex = index;
    },
    updateStaff() {
      this.staffList[this.editingIndex] = {...this.currentStaff};
      this.resetForm();
    },
    deleteStaff(index) {
      this.staffList.splice(index, 1);
      if (index === this.editingIndex) {
        this.resetForm();
      }
    },
    cancelEdit() {
      this.resetForm();
    },
    resetForm() {
      this.currentStaff = { name: '', position: '', phone: '', salary: '' };
      this.isEditing = false;
      this.editingIndex = -1;
    }
  }
}
</script>

<style scoped>
.content {
  margin-left: 240px;
  padding: 40px;
  background-color: #f4f6f9; 
}

.title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input-field {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  font-size: 16px;
  width: 200px;
}

.action-button {
  padding: 12px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #0056b3;
}

.cancel-button {
  padding: 12px 20px;
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.cancel-button:hover {
  background-color: #e2e6ea;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.data-table th,
.data-table td {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.data-table th {
  background-color: #f2f2f2;
  font-weight: 600;
}

.edit-button {
  padding: 8px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #218838;
}

.delete-button {
  padding: 8px 15px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #c82333;
}
</style>